<template>
	<div class="user">
		<div class="imgs fl">
			<img :src="$store.state.userCoverPath  ? $store.state.userCoverPath : 'img/child.c53e17f3.png'" alt="">
		</div>
		<span class="username">{{$store.state.userName}}</span>
		<el-dropdown trigger="click" class="downBottom" @command='handleCommand'>
			<span class="el-dropdown-link">{{$store.state.userid}}<i class="el-icon-caret-bottom"></i></span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item icon="el-icon-user-solid" command='backCenter'>个人中心</el-dropdown-item>
				<el-dropdown-item command='changeHead'><i class='iconfont icontouxiang'></i> 更换头像</el-dropdown-item>
				<el-dropdown-item command='changePass' icon="el-icon-key">更改密码</el-dropdown-item>
				<el-dropdown-item icon="el-icon-switch-button" command='logout'>退出登录</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<input type="file" ref="file" id="file" v-show="false">
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//获取数据
			getUserData() {
				this.$http.get('/api/user?userId='+this.$store.state.userId).then(res=>{
					let Ddata = this.$userClass.DgetUserMessage(res.data)
					console.log(Ddata)
					this.$store.commit('updataUserData',Ddata)
				})
			},
			//上传文件、更换头像
			handleCommand(command) {
				switch (command) {
					case 'logout':
						this.$router.push('/login');
						break;
					case 'backCenter':
						this.$router.push('/home/personalCenter')
						break;
					case 'changeHead':
						this.changeHead()
						break;
					case 'changePass':
						this.changePass()
						break;
				}
			},
			//更换头像
			changeHead(){
				this.$refs.file.click()
				this.$refs.file.addEventListener("change", () => {
					//获取到选中的文件
					var file = document.querySelector("#file").files[0];
					//创建formdata对象
					var formdata = new FormData();
					formdata.append("file", file);
					this.$http.post('/api/user/CoverImg', formdata).then(res => {
						this.getUserData()
					})
				})
			},
			//更改密码
			changePass(){
        this.$prompt('请输入新密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
					
          this.$message({
            type: 'success',
            message: '更改密码成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
			}
		}
	};
</script>

<style scoped="scoped">
	.user {
		width: 200px;
		height: 60px;
		font-weight: 600;
		text-shadow: 0px 0px 6px #ffffff;
	}

	.user .imgs {
		width: 40px;
		height: 40px;
		overflow: hidden;
		border-radius: 100%;
		border: 2px solid #c9c9c9;
		background-color: #adadad;
		margin-right: 10px;
		margin-top: 10px;
	}

	.user .imgs img {
		width: 40px;
		height: 40px;
		object-fit: cover;
	}

	.user span {
		font-size: 20px;
		line-height: 60px;
		float: left;
	}

	.user i {
		margin-left: 10px;
		font-size: 20px;
		cursor: pointer;
	}

	.user .el-dropdown {
		float: left;
	}
</style>
